import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { checking ,delet} from '../../../../store/Slice/taskReducer'

export default function Item({ id, todo, check }) {
    const dispatch = useDispatch()
    const [isState,setIsState] = useState(false)

    const checkHandle = (e) => {
        dispatch(checking(id))
    }

    const changeCssHandle = (state)=>{
       return ()=>{
           setIsState(state) 
       }
    }

    const deleteTesk=()=>{
        dispatch(delet(id))
    }
    return (
        <div>
            <li className={isState?'active':''} onMouseEnter={changeCssHandle(true)} onMouseLeave={changeCssHandle(false)}>
                <label>
                    <input type="checkbox" checked={check} onChange={checkHandle} />
                    <span>{todo}</span>
                </label>
                <button onClick={deleteTesk} className="btn btn-danger" style={{ display: isState?'block':'none' }}>删除</button>
            </li>
        </div>
    )
}
